import React, { Component } from 'react';
import { Layout, Menu, Icon ,Dropdown,Row, Col} from 'antd';
import { Link } from 'react-router-dom'
import Contents from './content'
import createHistory from 'history/createBrowserHistory'
import {connect} from 'react-redux'
import {logoutSubmit} from "./redux/user.redux";


const { Header, Content, Footer, Sider } = Layout;
const history = createHistory()
const { location } = history

class App extends Component {
    selectedKeys(){
        if(location.pathname === '/home'){
            return ["1"]
        }else if(location.pathname === '/product'){
            return ["2"]
        }else if(location.pathname === '/product-category'){
            return ["3"]
        }else if(location.pathname === '/order'){
            return ["4"]
        }else if(location.pathname === '/user'){
            return ["5"]
        }else {
            return ["1"]
        }
    }
  render() {
      const menu = (
          <Menu>
              <Menu.Item>
                  <a onClick={()=>{
                      this.props.logoutSubmit()
                  }}  rel="noopener noreferrer">
                      <Icon type="export" theme="outlined" />
                      退出
                  </a>
              </Menu.Item>
          </Menu>
      );

    return (
        <Layout>
            <Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }}>
                <div className="logo" />
                <Menu theme="dark" mode="inline"
                      defaultSelectedKeys={this.selectedKeys()}
                      defaultOpenKeys={['sub1','sub2','sub3']}
                >
                        <Menu.Item key="1">
                            <Link to={'/home'}>
                                <Icon type="user" />
                                <span className="nav-text">首页</span>
                            </Link>
                        </Menu.Item>
                        <Menu.SubMenu key="sub1" title={<span><Icon type="mail" /><span>商品</span></span>}>
                        <Menu.Item key="2"><Link to={'/product'}>商品管理</Link> </Menu.Item>
                            <Menu.Item key="3"><Link to={'/product-category'}>品类管理</Link> </Menu.Item>
                    </Menu.SubMenu>
                    <Menu.SubMenu key="sub2" title={<span><Icon type="mail" /><span>订单</span></span>}>
                        <Menu.Item key="4"><Link to={'/order'}>订单管理</Link>  </Menu.Item>
                    </Menu.SubMenu>
                    <Menu.SubMenu key="sub3" title={<span><Icon type="mail" /><span>用户</span></span>}>
                        <Menu.Item key="5"><Link to={'/user'}>用户列表</Link>  </Menu.Item>
                    </Menu.SubMenu>
                </Menu>
            </Sider>
            <Layout style={{ marginLeft: 200 }}>
                <Header style={{ background: '#fff',boxShadow: '0 0 5px rgba(0, 0, 0, .1)', padding: 0,position: 'fixed', left:200 ,top:0,right:0, height: 60}} >

                    <Row  gutter={32} type="flex" justify="end">
                        <Col style={{marginRight:'30px'}} >
                            <Dropdown  overlay={menu}>
                                <a className="ant-dropdown-link loginOut" href="#">
                                    <Icon style={{fontSize:15}} type="user" />
                                   欢迎， {this.props.user.username}
                                     <Icon style={{fontSize:15}} type="down" />
                                </a>
                            </Dropdown>
                        </Col>
                    </Row>



                </Header>
                <Content style={{ margin: '24px 16px 0', overflow: 'initial',marginTop: '84px' }}>
                    <div style={{ padding: 24, background: '#fff' }}>
                        <Contents></Contents>
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    Ant Design ©2018 Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
  }
}

function mapStateToProps(state){
    return state.user;
}

const mapDispatchToProps = (dispatch) => ( { // <- forgot the wrapping with ( here
    logoutSubmit: () => {
        dispatch(logoutSubmit())
    }
} )

// export default App;
export default connect(mapStateToProps,mapDispatchToProps)(App);

